import { Suspense, useEffect } from 'react'
import { Outlet, Router, RouterProvider, useLocation, useNavigate, useRoutes } from 'react-router-dom'
import routes from '@/router/index.tsx'
import authRoute from '@/router/AuthRouter'

function App() {
	const navigator = useNavigate()
	const location = useLocation()
	const goToPage = (url: string) => {
		navigator(url)
	}
	useEffect(() => {
		authRoute(location.pathname, navigator)
	}, [location.pathname])
	return (
		<>
			<ul>
				<li onClick={() => goToPage('/login')}>login</li>
				<li onClick={() => goToPage('/error-page')}>error-page</li>
				<li onClick={() => goToPage('/index')}>index</li>
				<li onClick={() => goToPage('/index/about')}>about</li>
				<li onClick={() => window.history.pushState(null, '', '/react-app/index')}>react18 sub app</li>
			</ul>
			<Suspense fallback="">
				<div className="main">
					{useRoutes(routes)}
				</div>
			</Suspense>
			<div id="sub-app"></div>
		</>
	)
}

export default App
